<!-- @format -->

<template>
  <view class="snowPackIntro">
    <!-- 雪场介绍 -->
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="snowPackIntro-content" :style="[{ top: top + 'px' }]">
      <!-- 轮播图 -->
      <view class="spc-swiper">
        <view class="swiper-box" @click="toImgListPage()">
          <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval="3000">
            <swiper-item class="index-swiper-item" v-for="(item, index) in swiperList" :key="index">
              <image class="i-image" :src="item"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- 介绍 -->
      <view class="spc-intro-box">
        <view class="sib-top">
          <view class="sibt-name-grade-more">
            <view class="sibt-name-grade">
              <view class="sibt-name">
                {{ slopeIntro.slopeName ? slopeIntro.slopeName : '-' }}
              </view>
			  <!-- 
              <view class="sibt-grade">
                <image src="/myPackageA/static/storeIntro/gradeFire.png" mode=""></image>
                {{ slopeIntro.score ? slopeIntro.score : '-' }}分
              </view>
			  -->
            </view>
            <view class="sibt-more" @click="toSnowPackDetail">
              <view class="sim-title"> 了解更多</view>
              <view class="sim-img">
                <image src="/myPackageA/static/easyClear/more.png" mode=""></image>
              </view>
            </view>
          </view>
          <text class="sib-city-name">
            {{ slopeIntro.address ? slopeIntro.address : '-' }}
          </text>
          <view class="sib-other-btn">
            <view class="ob-position" @click="toPosition()">
              <image src="../../static/storeIntro/position.png" mode=""></image>
              <view class="lp-title"> 导航 </view>
            </view>
            <view class="ob-phone" @click="getPhone()">
              <image src="/myPackageA/static/storeIntro/phone.png" mode=""></image>
              <view class="lp-title"> 电话 </view>
            </view>
            <view class="ob-buy-ticket"  @click="goxc()" v-if="ctripAppid" style="width:140rpx;">
              <image src="/myPackageA/static/storeIntro/buyTicket.png" mode=""></image>
              <view class="lp-title"> 在线预订 </view>
            </view>
            <view class="ob-little-program" @click="gomini()" v-if="slopeAppid">
              <image src="/myPackageA/static/storeIntro/littleProgram.png" mode="" ></image>
              <view class="lp-title"> 直达商家 </view>
            </view>
          </view>
        </view>
        <view class="split"></view>
        <view class="sib-bottom">
          <view class="sibb-item">
            <image class="sibb-img" src="/myPackageA/static/easyClear/sp-time.png" mode=""></image>
            <view class="sibb-title"> 营业时间 </view>
            <text class="sibb-content">
              {{ slopeIntro.openingTime ? slopeIntro.openingTime : '-' }}
            </text>
          </view>
          <view class="sibb-item">
            <image class="sibb-img" style="width: 24rpx; height: 29rpx" src="/myPackageA/static/easyClear/sp-ticket.png"
              mode=""></image>
            <view class="sibb-title"> 门票信息 </view>
            <text class="sibb-content">
              {{ slopeIntro.ticketPrice ? slopeIntro.ticketPrice : '-' }}
            </text>
          </view>
          <view class="sibb-item">
            <image class="sibb-img" src="/myPackageA/static/easyClear/sp-snowroad.png" mode=""></image>
            <view class="sibb-title"> 雪道信息 </view>
            <view class="sibb-content">
              初级道{{ slopeIntro.statisticsVoList[0].num && slopeIntro.statisticsVoList[0].num !== null   ? slopeIntro.statisticsVoList[0].num : '-' }}条，中级道{{
               slopeIntro.statisticsVoList[0].num && slopeIntro.statisticsVoList[1].num !== null ? slopeIntro.statisticsVoList[1].num : '-'
              }}条，高级道{{slopeIntro.statisticsVoList[0].num && slopeIntro.statisticsVoList[2].num !== null ? slopeIntro.statisticsVoList[2].num : '-' }}条
            </view>
          </view>
        </view>
      </view>

      <!-- 雪圈和周边 -->
      <view class="skiTubing-perimeter">
        <view class="sp-tab">
          <view class="sp-tab-item" @click="changeTabIndex(index)" :class="spTabIndex == index ? 'spActive' : ''"
            v-for="(item, index) in spTabList" :key="index">
            {{ item.name }}
          </view>
        </view>
        <!-- 雪圈和周边内容 -->
        <view class="sp-content">
          <!-- 雪圈 -->
          <view class="sp-skiTubing" v-if="spTabIndex == 0">
            <view class="pubuBox" v-if="skiList.length>0">
              <view class="pubuItem">
				  
                <view class="item-masonry" v-for="(item, index) in skiList" :key="index"
                  @tap="newDetail(item.circleId)" >
                  <view class="im-img">
                    <image :src="getImage(item.titleImg)" mode="widthFix"></image>
                    <!-- 是否是商家 -->
                    <view class="is-maketers"
                      v-if="item.businessId !== 0 && item.businessId !== undefined && item.businessId !== null && item.businessId !== ''">
                      <image src="/myPackageA/static/easyClear/self.png" mode=""></image>
                      <view class="ism-title"> 商家 </view>
                    </view>
                    <view class="sps-pos" v-if="item.slopeName">
                      <image src="/myPackageA/static/storeIntro/greenPos.png" mode=""></image>
                      <view class="hi-distance">
                        {{ item.slopeName }}
                      </view>
                    </view>
                  </view>

                  <view class="listtitle">
                    <!-- 这是没有高度的父盒子（下半部分） -->
                    <view class="ci-title">{{ item.title }}</view>
                    <view class="ci-user">
                      <view class="user-left">
                        <view class="user-avatar">
                          <image :src="item.avatar" mode=""></image>
                        </view>
                        <view class="user-name">
                          {{ item.userName }}
                        </view>
                      </view>
					  <!--
                      <view class="user-see">
                        <image src="/myPackageA/static/easyClear/see.png" mode=""></image>
                        <view class="seeLen"> {{ item.clickNum }} </view>
                      </view>
					  -->
                    </view>
                  </view>
                </view>
			
              </view>
			
            </view>
			  	<view v-else style="display: flex;width: 100%;justify-content: center;font-size: 24rpx;color:#000;height: 300rpx;align-items: center;">暂无数据</view>
          </view>
          <!-- 雪场周边 -->
          <view class="sp-perimeter" v-else-if="spTabIndex == 1">
            <view class="sper-tab">
              <view class="nav">
                <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
                <scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
                  <view class="tab-scroll_box">
                    <!-- 选项卡类别列表 -->
                    <view class="tab-scroll_item" :class="perimeterTabIndex == item.dictValue ? 'spd-active' : ''"
                      v-for="(item, index) in perimeterTabs" :key="index" @click="changePerTabIndex(item.dictValue)">
                      {{item.dictLabel}}
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
            <!-- 不同tab内容 -->
            <view class="sper-tab-content">
              <view class="hotel-box">
                <view class="hotel-item" @click="toStoreIntro(item)" v-for="(item, index) in othersList" :key="index">
                  <!-- 是否自营 -->
                  <view class="is-self-employed" v-if="item.isSelfEmployedShow">
                    <image src="/myPackageA/static/easyClear/self.png" mode=""></image>
                    <view class="ise-title"> 自营 </view>
                  </view>
                  <view class="ht-img">
                    <image :src="item.bussinessImg" mode=""></image>
                    <view class="hi-distance">
                      距离{{item.slopeName}}{{ item.distanceOf ? item.distanceOf : 0 }}公里
                    </view>
                  </view>
                  <view class="hi-content">
                    <view class="hi-name">
                      {{ item.bussinessName }}
                    </view>
                    <view class="hi-grade" v-if="item.tag.length > 0">
                      {{ item.tag[0] }}
                    </view>
                    <view class="hi-label" v-if="item.childTag.length > 0">
                      <view class="label-item" v-for="(item1, index1) in item.childTag" :key="index1">
                        {{ item1 }}
                      </view>
                    </view>
                  </view>
                </view>
                <i-divider v-if="othersList.length > 0" :loadingType="loadingType"></i-divider>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        spTabIndex: 0, //tab切换
        loadingType: 0, //加载文字类型
        perimeterTabIndex: 0, //小tab切换
        slopeIntro: {},
		 ctripAppid:'',
		  ctripUrl:'',
		  slopeAppid:'',
		  slopeUrl:'',
        spTabList: [{
            //大tab
            name: '雪友评价',
            id: 1,
          },
          {
            name: '雪场周边',
            id: 2,
          },
        ],
        perimeterTabs: [], //雪场周边tab
        top: 0, //距离顶部距离
        childTitle: '雪场', //标题
        snowPackId: '', //页面跳转接收到的雪场id
        swiperList: [],
        skiList: [],
        otherParam: {
          pageSize: 4,
          pageNum: 1,
        },
		otherParam1: {
		  pageSize: 4,
		  pageNum: 1,
		},
        totalPage:0,
        othersList: [],
      }
    },
	
    onReachBottom() {
      this.otherParam.pageNum++
      if (this.loadingType !== 0) {
        return false
      }
      this.loadingType = 1
      this.getOthersList()
    },
    onLoad(options) {
      if (options.id) {
        console.log(options.snowPackId)
        this.snowPackId = options.id
      }
      if (options.snowPackId) {
        console.log(options.snowPackId)
        this.snowPackId = options.snowPackId
      }
      this.getSnowPackIntro() //获取雪场详情信息
      this.getStatisticsVoList() //获取动态雪场周边tab
      this.getCircleList() // 获取雪友评价（雪圈）
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '雪场',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '雪场',
		    imageUrl: this.img,
		  }
		},
		gomini(){
			wx.navigateToMiniProgram({
			    appId: this.slopeAppid,
			    path: this.slopeUrl,
			    //develop开发版；trial体验版；release正式版
			    envVersion: 'release', 
			    success(res) {
			      // 打开成功
			      console.log("跳转小程序成功！",res);
			    } ,
				fail(e){
					console.log(e)
				},
				
			})
			console.log('a')
			/*
				wx.navigateToMiniProgram({
				    appId: 'wxa446b02b86d9ad81',
				    path: 'pages/index/index',
				    //develop开发版；trial体验版；release正式版
				    envVersion: 'release', 
				    success(res) {
				      // 打开成功
				      console.log("跳转小程序成功！",res);
				    } ,
					fail(e){
						console.log(e)
					},
					
				})
	_this.ctripAppid=res.data.data.ctripAppid,
	_this.ctripUrl=res.data.data.ctripUrl,
	_this.slopeAppid=res.data.data.slopeAppid,
	_this.slopeUrl=res.data.data.slopeUrl,
*/
		},
		goxc(){
			wx.navigateToMiniProgram({
			    appId: this.ctripAppid,
			    path: this.ctripUrl,
			    //develop开发版；trial体验版；release正式版
			    envVersion: 'release', 
			    success(res) {
			      // 打开成功
			      console.log("跳转小程序成功！",res);
			    } ,
				fail(e){
					console.log(e)
				},
				
			})
		},
      // 获取雪友评价（雪圈）
      getCircleList() {
        let params = {
          pageNum: 1,
          pageSize: 10,
          slopeId: this.snowPackId
        }
		console.log(params)
        let _this = this
        wx.request({
          url: this.$httpApi.install.circleList,
          method: 'GET',
          data: params,
          success(res) {
            console.log("雪圈res>>>>", res)
            _this.skiList = res.data.rows
            console.log("雪圈列表数据>>>", res.data.rows);
          },
        })
      },
      /* 回显雪圈封面图片*/
      getImage(titleImg) {
        if (titleImg && titleImg.includes(";")) {
          let imageList = titleImg.split(";");
          return imageList[0];
        } else {
          return titleImg
        }
      },
      /* 详情页面跳转*/
      newDetail(id) {
        console.log("详情页面跳转>>", id)
        uni.navigateTo({
          url: `/myPackageA/pages/skiTubingInfo/skiTubingInfo?id=${id}`,
        })
      },
      //获取动态雪场周边tab
      getStatisticsVoList() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getStatisticsVoList + _this.snowPackId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              // console.log(res)
              _this.getSlopeTab(res.data.data)
            } else {
              // console.log(res.msg)
            }
          },
          fail(error) {},
        })
      },
      // 过滤掉没有的
      getSlopeTab(list) {
        list.forEach((item) => {
          if (item.num > 0) {
            this.perimeterTabs.push(item)
          }
        })
      },
      // 获取当前雪场的轮播图
      getSwiperList() {
        if (this.slopeIntro.photo) {
          this.swiperList = this.slopeIntro.photo.split(',')
        }
      },
      // 获取雪场详情
      getSnowPackIntro() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getSlopeIntro + _this.snowPackId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
             console.log('dddddddddddddd')
			 console.log(res)
              _this.slopeIntro = res.data.data
				_this.ctripAppid=res.data.data.ctripAppid,
				_this.ctripUrl=res.data.data.ctripUrl,
				_this.slopeAppid=res.data.data.slopeAppid,
				_this.slopeUrl=res.data.data.slopeUrl,
              _this.getSwiperList()
            } else {
              // console.log(res.msg)
            }
          },
          fail(error) {},
        })
      },
      // 雪场周边列表
      getOthersList(val) {
        let _this = this
        _this.otherParam.slopeId = _this.snowPackId
        if (val) {
          _this.otherParam.bussinessType = val
        }
        wx.request({
          url: _this.$httpApi.install.businessList,
          method: 'GET',
          data: _this.otherParam,
          success(res) {
			  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaa')

				  console.log(_this.otherParam)
				console.log(res)
            if (res.data.code == 200) {
              if (res.data.rows.length == 0) {
                //没有数据
                _this.loadingType = 2
                return
              }
              // 不足分页数量
              _this.totalPage = Math.ceil(res.data.total / _this.otherParam.pageSize)
              // 不足分页数量
              if (_this.otherParam.pageNum >= _this.totalPage) {
                _this.loadingType = 2
              } else {
                _this.loadingType = 0 //将loadingType归0重置
              }
              _this.othersList = _this.othersList.concat(res.data.rows)
              _this.getTag(res.data.rows)
            }
          },
        })
      },
      // 获取酒店标签
      getTag(list) {
        // console.log(list)
        if (list.length > 0) {
          list.forEach((item) => {
            if (item.tag !== null) {
              item.tag = item.tag.split(',')
              item.childTag = item.tag.slice(1)
            } else {
              item.tag = []
              item.childTag = []
            }
          })
        }
      },
      // 跳转到图片列表页面
      toImgListPage() {
       // uni.navigateTo({
      //    url: '/myPackageA/pages/imgList/imgList?snowPackId=' + this.snowPackId,
       // })
      },
      // 点击跳转详情
      toStoreIntro(item) {
        uni.navigateTo({
          url: '/myPackageA/pages/storeIntro/storeIntro?businessId=' +
            item.bussinessId,
        })
      },
      toSnowPackDetail() {
        uni.navigateTo({
          url: '/myPackageA/pages/snowPackDetail/snowPackDetail?slopeId=' +
            this.snowPackId,
        })
      },
      // 切换tab
      changeTabIndex(index) {
		
        this.spTabIndex = index
			this.otherParam=this.otherParam1
        if (this.spTabIndex == 1) {
          this.othersList = []
          this.getOthersList()
        }
		else{
			this.otherParam=this.otherParam1
		}
      },
      // 切换小tab
      changePerTabIndex(index) {
		    console.log('点了')

		  	this.otherParam.pageSize=4
			
			  	this.otherParam.pageNum=1
        this.perimeterTabIndex = index
        this.othersList = []
        this.getOthersList(index)
      },
      // 导航点击
      toPosition() {
       console.log(this.slopeIntro.positionX)
	     console.log(this.slopeIntro.positionY)
        if (!this.slopeIntro.positionX || !this.slopeIntro.positionY) {
          uni.showToast({
            title: '暂无导航数据',
          })
          return
        }
       // let pos = this.slopeIntro.position.split(',')
        let lat = this.slopeIntro.positionY
        let lng = this.slopeIntro.positionX
        //打开地图，并将门店位置传入
        uni.getLocation({
			 type: 'gcj02',
          success: (res) => {
       console.log('location success', Number(parseFloat(lat)), parseFloat(lng))
            uni.openLocation({
              latitude: parseFloat(lat),
              longitude: parseFloat(lng),
			  name:this.slopeIntro.slopeName,
			  address:this.slopeIntro.address,
              scale: 17,
            })
          },
		  fail(e){
			  console.log(e)
		  },
        })
      },
      getPhone() {
        // console.log(this.slopeIntro.tel)
        if (!this.slopeIntro.tel) {
          uni.showToast({
            title: '暂无电话数据',
          })
          return
        }
        // 电话号码待添加
        let phoneNumList = this.slopeIntro.tel.split(',')
        uni.showActionSheet({
          itemList: phoneNumList,
          success: (res) => {
            let phoneNum = phoneNumList[res.tapIndex]
            this.toMakePhoneCall(phoneNum)
          },
          fail: (err) => {
            console.log('弹窗取消', err)
          },
        })
      },
      // 拨打电话
      toMakePhoneCall(phoneNum) {
        wx.makePhoneCall({
          phoneNumber: phoneNum,
          success: function() {
            console.log('拨打电话成功！')
          },
          fail: function() {
            console.log('拨打电话失败！')
          },
        })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    },
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #f8fafe;
  }
</style>
<style lang="scss">
  .snowPackIntro-content {
    position: absolute;
    padding: 0 30rpx;

    // 头部轮播图
    .spc-swiper {

      // 轮播图
      .swiper-box {
        margin-top: 20rpx;
        width: 100%;

        .uni-swiper-wrapper {
          width: 690rpx;
          height: 340rpx;

          /deep/ .wx-swiper-dot {
            // 指示点元素默认样式
            width: 16rpx !important;
            height: 16rpx !important;
            background: #64787b !important;
            border-radius: 50%;
          }

          /deep/ .wx-swiper-dot-active {
            // 指示点元素激活（当前选中）状态样式
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            width: 63rpx !important;
            height: 16rpx !important;
            background-color: #303030 !important;
          }

          .index-swiper-item {
            border-radius: 20rpx;

            .i-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    // 介绍
    .spc-intro-box {
      padding: 30rpx 20rpx 10rpx 20rpx;
      width: 690rpx;
      // height: 421rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin-top: 17rpx;

      .sib-top {
        .sibt-name-grade-more {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .sibt-name-grade {
            display: flex;
            align-items: center;

            .sibt-name {
              font-size: 40rpx;
              max-width: 400rpx;
              font-weight: 500;
              color: #303030;
            }

            .sibt-grade {
              margin-left: 20rpx;
              padding: 0 15rpx;
              // width: 91rpx;
              height: 32rpx;
              background: #ff3d3d;
              border-radius: 10rpx;
              display: flex;
              align-items: center;
              font-size: 16rpx;
              font-weight: bold;
              color: #ffffff;

              image {
                margin-right: 6rpx;
                width: 15rpx;
                height: 20rpx;
              }
            }
          }

          .sibt-more {
            display: flex;

            .sim-title {
              font-size: 24rpx;
              font-weight: bold;
              color: #303030;
            }

            .sim-img {
              margin-left: 10rpx;
              width: 32rpx;
              height: 32rpx;
              background: #303030;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;

              image {
                width: 20rpx;
                height: 20rpx;
              }
            }
          }
        }

        .sib-city-name {
          font-size: 24rpx;
          color: #595959;
          margin-top: 34rpx;
        }

        .sib-other-btn {
          margin-top: 30rpx;
          display: flex;
         

          image {
            width: 20rpx;
            height: 20rpx;
          }

          .lp-title {
            font-size: 24rpx;
            font-weight: bold;
            color: #464646;
            margin-left: 5rpx;
          }

          .ob-position {
            width: 101rpx;
            height: 34rpx;
            background: linear-gradient(90deg,
                rgba(93, 135, 237, 0.15) 0%,
                rgba(239, 241, 244, 0.15) 100%);
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            display: flex;
            align-items: center;
            padding-left: 15rpx;
			margin:0 20rpx;
          }

          .ob-phone {
            width: 103rpx;
            height: 34rpx;
            background: linear-gradient(90deg,
                rgba(93, 237, 155, 0.15) 0%,
                rgba(239, 241, 244, 0.15) 100%);
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            display: flex;
            align-items: center;
            padding-left: 15rpx;
          }

          .ob-buy-ticket {
            width: 103rpx;
            height: 34rpx;
            background: linear-gradient(90deg,
                rgba(237, 108, 93, 0.15) 0%,
                rgba(244, 241, 239, 0.15) 100%);
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            display: flex;
            align-items: center;
            padding-left: 15rpx;
          }

          .ob-little-program {
            width: 177rpx;
            height: 34rpx;
            background: linear-gradient(90deg,
                rgba(237, 93, 213, 0.15) 0%,
                rgba(242, 239, 244, 0.15) 100%);
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            display: flex;
            align-items: center;
            padding-left: 15rpx;
          }
        }
      }

      .split {
        width: 650rpx;
        height: 2rpx;
        margin: 30rpx 0;
        background-color: rgba(145, 164, 178, 0.2);
      }

      .sib-bottom {
        .sibb-item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .sibb-img {
            width: 23rpx;
            height: 23rpx;
          }

          .sibb-title {
            font-size: 24rpx;
            color: #303030;
            margin-left: 13rpx;
          }

          .sibb-content {
            flex: 1;
            margin-left: 20rpx;
            font-size: 24rpx;
            color: #595959;
          }
        }
      }
    }

    // 雪圈和周边
    .skiTubing-perimeter {
      margin-top: 20rpx;

      .sp-tab {
        display: flex;
        align-items: baseline;

        .sp-tab-item {
          font-size: 28rpx;
          color: #a4a4a4;
          margin-right: 40rpx;
        }

        .spActive {
          font-size: 36rpx;
          font-weight: 500;
          color: #303030;
          position: relative;

          &::after {
            content: '';
            width: 40rpx;
            height: 10rpx;
            border-radius: 8rpx;
            background-color: #303030;
            position: absolute;
            bottom: -15rpx;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }

      // 雪圈和周边内容
      .sp-content {
        margin-top: 28rpx;

        // 雪圈
        .sp-skiTubing {

          // 瀑布流内容
          .pubuItem {
            column-count: 2;
            column-gap: 20rpx;
          }

          .item-masonry {
            box-sizing: border-box;
            border-radius: 20rpx;
            overflow: hidden;
            background-color: #fff;
            break-inside: avoid;
            /*避免在元素内部插入分页符*/
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .im-img {
              position: relative;

              .is-maketers {
                position: absolute;
                z-index: 99;
                right: 0;
                top: 0;
                width: 105rpx;
                height: 35rpx;
                background: linear-gradient(270deg, #8934ff 0%, #ff63e8 100%);
                border-radius: 0rpx 19rpx 0rpx 19rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                  width: 24rpx;
                  height: 24rpx;
                }

                .ism-title {
                  font-size: 22rpx;
                  font-family: Source Han Sans CN, Source Han Sans CN;
                  font-weight: 400;
                  color: #ffffff;
                }
              }

              .sps-pos {
                background: #303030;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 17rpx;
                left: 10rpx;
                padding: 5rpx 16rpx 5rpx 6rpx;

                image {
                  width: 24rpx;
                  height: 26rpx;
                }

                .hi-distance {
                  margin-left: 5rpx;
                  font-size: 24rpx;
                  color: #88f79c;
                }
              }
            }
          }

          .item-masonry image {
            width: 100%;
          }

          .listtitle {
            padding-left: 16rpx;
            font-size: 24rpx;
            padding-bottom: 22rpx;

            .ci-title {
              line-height: 39rpx;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              min-height: 39rpx;
              max-height: 78rpx;
            }

            .ci-user {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 12rpx;

              .user-see {
                display: flex;
                align-items: center;
                padding-right: 18rpx;

                image {
                  width: 28rpx;
                  height: 28rpx;
                }

                .seeLen {
                  margin-left: 5rpx;
                  font-size: 18rpx;
                  color: #595959;
                }
              }

              .user-left {
                display: flex;
                align-items: center;

                .user-avatar {
                  width: 30rpx;
                  height: 30rpx;
                  background: #6e6e6e;
                  border-radius: 50%;

                  image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }

                .user-name {
                  font-size: 20rpx;
                  font-weight: bold;
                  margin-left: 10rpx;
                }
              }
            }
          }
        }

        // 周边

        .sp-perimeter {
          .sper-tab {
            .nav {
              width: 100%;
              align-items: center;
              width: 100%;
              background: #F8FAFE;

              .tab-scroll {
                flex: 1;
                overflow: hidden;
                box-sizing: border-box;
                padding-right: 30rpx;

                .tab-scroll_box {
                  display: flex;
                  align-items: center;
                  flex-wrap: nowrap;
                  box-sizing: border-box;

                  .spd-active {
                    background: #303030;
                    border-radius: 24rpx 24rpx 24rpx 24rpx;
                    color: #FFFFFF !important;
                  }

                  .tab-scroll_item {
                    flex-shrink: 0;
                    padding: 10rpx 20rpx;
                    display: flex;
                    justify-content: center;
                    font-size: 24rpx;
                    color: #A4A4A4;
                  }
                }
              }
            }

            // display: flex;
            // justify-content: space-between;

            // // padding: 0 20rpx;
            // .perActive {
            //   background: #303030;
            //   border-radius: 24rpx;
            //   padding: 11rpx 4rpx;
            //   color: #ffffff !important;
            // }

            // .sper-tab-item {
            //   display: flex;
            //   flex: 1;
            //   justify-content: center;
            //   align-items: center;
            //   font-size: 24rpx;
            //   color: #a4a4a4;
            // }
          }

          // 不同tab的内容
          .sper-tab-content {
            margin-top: 20rpx;

            .hotel-box {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .hotel-item {
                background: #ffffff;
                padding-bottom: 30rpx;
                margin-bottom: 20rpx;
                border-radius: 20rpx;
                position: relative;
				width: 335rpx;
                .is-self-employed {
                  position: absolute;
                  z-index: 99;
                  right: 0;
                  top: 0;
                  width: 105rpx;
                  height: 35rpx;
                  background: linear-gradient(270deg, #ff3434 0%, #ffa163 100%);
                  border-radius: 0rpx 19rpx 0rpx 19rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  image {
                    width: 24rpx;
                    height: 24rpx;
                  }

                  .ise-title {
                    font-size: 22rpx;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                  }
                }

                .ht-img {
                  width: 335rpx;
                  height: 377rpx;
                  background: #d6d6d6;
                  border-radius: 20rpx 20rpx 0rpx 0rpx;
                  position: relative;

                  image {
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx 20rpx 0rpx 0rpx;
                  }

                  .hi-distance {
                    position: absolute;
                    bottom: 10rpx;
                    left: 10rpx;
                    padding: 5rpx 17rpx;
                    background: #303030;
                    border-radius: 18rpx 18rpx 18rpx 18rpx;

                    font-size: 24rpx;
                    color: #88f79c;
                  }
                }

                .hi-content {
                  padding-left: 16rpx;

                  .hi-name {
                    font-size: 24rpx;
                    font-weight: bold;
                    margin-top: 10rpx;
                    color: #464646;
                  }

                  .hi-grade {
                    margin-top: 10rpx;
                    display: inline-block;
                    padding: 4rpx 12rpx;
                    background: #eff1f4;
                    border-radius: 18rpx 18rpx 18rpx 18rpx;
                    font-size: 20rpx;
                    color: #ff4e00;
                  }

                  .hi-label {
                    display: flex;
                    margin-top: 10rpx;

                    .label-item {
                      background: #eff1f4;
                      border-radius: 18rpx 18rpx 18rpx 18rpx;
                      font-size: 20rpx;
                      font-family: Source Han Sans CN, Source Han Sans CN;
                      font-weight: 400;
                      color: #91a4b2;
                      padding: 4rpx 16rpx;
                      margin-right: 10rpx;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>